<template>
<div>
  <div class="screensharemark column"></div>
  <div class="column">
    <div class="markop">
      <button class="exit" @click="closescreenmark()">关闭</button>
      <!--<img src="../../static/images/setting.png" class="closeimg" @click="closescreenmark()">-->
    </div>
    <video class="screenmarkvideo" controls playsinline autoplay muted id="screenmark" v-show="1"></video>
    <whiteboardclear class="whiteboard" ref="wb"></whiteboardclear>
  </div>
</div>
</template>

<script>
    import Whiteboardclear from "./Whiteboardclear";
    export default {
      name: "Screensharemark",
      components: {Whiteboardclear},
      data(){
          return{

          }
        },
        props:['screenstreampublication','screenstream'],
        mounted(){

        },
        methods:{
          closescreenmark(){
            this.$emit('closescreenmark');
            this.$refs.wb.clearCanvas();
          },
        },

    }
</script>

<style scoped>

  .screenmarkvideo{

    width: 1000px;
    height: 500px;
     position: absolute;
     object-fit: contain;
     top: 120px;
    background-color: #1f1f1f;
  }

  .screensharemark{
    width: 100%;
    height: 100%;
    position: absolute;
    background:rgba(51,51,51,0.72);
    opacity:0.2983;
    left: 0;
    top: 0;

  }

  .column{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }


  .closeimg{
    width: 40px;
    height: 40px;
    right: 10px;
    /*position: absolute;*/
    /*top:110px;*/
    /*right: 10px;*/
  }

  .markop{
    width: 1000px;
    height: 50px;
    position: absolute;
    top: 70px;
    /*background: yellow;*/
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
  }

  .exit{
    width:96px;
    height:36px;
    background:rgba(82,153,248,1);
    /*border:1px solid rgba(49,98,197,1);*/
    border-radius:4px;
    font-size:14px;
    font-family:PingFang SC;
    font-weight:400;
    color:rgba(255,255,255,1);
  }


  .whiteboard{
    width: 1000px;
    height: 500px;
    position: absolute;
    top: 120px;
  }

</style>
